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ABSTRACT 

The World Wide Web (WWW) acts as a multimedia 
Internet, navigable via Web browsers. Web browsers (Mosaic, Netscape, 
Cello, WinWeb, etc.) read files treated in HyperText Mark-up Language 
(HTML) and display interactive pages to users. Teachers with 
computer-mediated classrooms or labs can use HTML and Web browsers to 
create multimedia presentations for their classes. Files required for 
HTML, including text, graphics, and other multimedia, are discussed. 
The process involves using text files to create HtML documents 
containing coding-embedded HTML commands. HTML commands are the 
language used to mark up text to make it interactive and "pretty." 
The most common HTML codes ("tags") for making text pretty are listed 
and defined. Additional codes are defined which are needed to turn 
the text into an interactive, multimedia experience. Appendices 
include sample text from a Web document and some Internet sites of 
interest to Web builders. (MAS) 
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You and your students can now "point & click" your ways around the world. 
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The WorldWideWeb (www, or simply "the Web") acts as a multi-media Internet, navigable via Web 
browsers in much the same way tliat the Internet Proper can be navigated via "gopher" clients and 
servers . Web browsers (including Mo<;aic, NetScape, Cello, WinWeb and other locally hosted clients) 
"read" files treated in html (HypeiText Mark-up Language) and display interactive "pages" to their 
users. You click here, it displays a new page; click here, a picture appears; click over here, you're 
watching a movie clip; click on this other spot on the page, you're hearing music. Qick, click, click, 
click. Bunch of fun. And it can be educational. It doesn't matter to the Web browser whether the files 
it displays are saved to a local hard drive or stored on a remote machine to be accessed via a Web 
server-across the street or around the globe. Qick! 

Teachers with computer-mediated classrooms (or labs) can use html and Web browsers to create 
multi-media presentations for their classes. All they need is the browser, at least 8 meg of ram and 
some space on a network-accessible hard drive. Click! Teachers fortunate enough to have 
computer-aided classrooms (or labs) with Internet access can take it a step further and create 
customized gateways that will lead their students direcdy to the Internet resources most relevant to the 
subject(s) at hand. Click! And teacher and student scholars who have system administrators who are 
willing to support a local Web server and to provide disk space on a machine accessible to the Internet 
can take Web use still another step. They can add to and embellish those resources, publishing pages of 
their own for use by other teachers and students around the world. Click! 

It is a relatively painless procedure. 

Mostly, it requires of you the creation of text (as in "text-only" or ascii) files. All the other files with 
which you'll be working-the .gif files for your grahics, the .jpg files you'll use for high-resolution 
pictures, the .wav files you'll need for any sounds you want to use, the .mpg files you'll use tor moving 
pictures-all those files will be either "found art" that you'll collect or files that you'll create yourself (or 
with the help of computer-clueful friend or associate) using machines and software that will ask little of 
you other than that you name the file. Indeed, the piimary challenge presented to you by these 
"multi-media" files will be keeping track of their names, if your experience is anything like mine. 

But, getting back to those pesky text files, that's what you'll use to create your html documents. They'll 
contain coding-embedded html commands. That's the "language" you'll be using to "mark up" your 
"test" and make it "hyper" (that is, interactive) and, well, pretty (which is to say, italicized where you 
want it to be italicized, in larger type where you want larger t>'pe, illustrate it with graphics, etc.) This 
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coding may look strange to you, at first, until you get used to its (really pretty straightforward) inner 
logic. But your computer and all the software on your computer and everyone else's compute r-of/i^r 
than whatever Web browsing software looks at /f-will see (and treat) these files as "text-only" or text 
files. You should treat them as text (not binary) data, too, whenever up- or downloading these files, 
when using ftp etc. The convention, on the Web and amongst the computer-clueful in general, is to 
give these files ".htm" extensions on pc (ordos) platforms (and ".html" in unix or vms environments). 

There are several html authoring programs available that you can use to embed this coding in your 
documents. Each offers certain conveniences. But you don't really need one of those to get started. All 
you really need to produce html documents is a text editor. You can use Windows' "Notebook" or any 
dos text editor. You can even use "Word" or " WordPerfect'-provided you remember to save the file as 
"test-only" or ascii. 

The most common html codes (or "tags") for making your text pretty include the following: 
Begin End What It Does 

<html> </html> These are not really necessary to make your html document "work right," but it's 
considered "good form" to use them to indicate the beginnings and ends of such documents. 

<title> </title> Whatever text appears between these tags will operate as your title. That is. it will 
appear in the "title bar" of the "window" the reader's Web browser occupies on the screen. 

<hl> </hl> Whatever text appears between these tags will appear as a Size 1 heading, however the 
reader's Web browser treats that. Type specifications, by category, are resident in the readers' Web 
browsers. You control the category, with tags like these. But they control how those categories are 
treated typographically. Most browsers recognize smaller headings, designated h2, h3, h4, h5, h6. 

</p> Ends (or "breaks") a paragraph. It also inserts a blank line and begins the next paragraph. There 
is a <p> tag which begins paragraphs, but it is not necessary or commonly used. 

<br> Forces a line break. It operates, in other words, sort of like a "hard" carriage return. Web 
browsers generally "word wrap" lines of text according to whatever size window their users are 
operating, unless they encounter </p> or <br> or some other excuse to "end" whatever line they are 
reading. 

<u> </u> Underlines the text between the tags so that <u>this</u> appears like Hm when read by a 
Web browser. 

<b> </b> Bold faces the text between the tags so that <b>this</b> appears like this when read by a 
Web browser. 

<i> <i/> Italicizes the text between the tags so that <i>ihis</i> appears like this when read by a Web 
browser. 

Do not pcmiit your tags to ovcriap. Encapsulate your coding instead. That is, if you want part of a 
message to be in bold and part of it to be italic too, that needs to be encoded: <b>message to be in 
bold and <i>part of it to be italic too</i></b> and not <b>message to be in bold and <i>part of it to be 
italic too</b></i>. 

To make all this an interactive, mutli-media experience for your readers you'll need to use a couple of 
additional tags to "link" your document to other documents on the Web and to decorate your document 
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with graphics (called "in-line images" by the computer clueful). That's what will put the "hyper" in 
your hypertext. The most common html codes (or "tags") for "hyper"-activating your document 
include: 

Begin End What It Does 

<a href="?"> </a> Whatever text occurs between these tags will be highlighted (usually in blue) by 
your readers' Web browsers. "Qicking" on that text will connect the user to whatever "url" you specify 
between the quotation marks (where I've inserted a question marie), 

<img align=x src="filename" alt="iext"> Inserts an in-line image in your Web document, when the 
following substitutions are made. Where I've put an "x," you insert the word top, middle, or bottom, 
depending upon where you want the next piece of text in your document to "align" itself viz a viz the 
graphic. The name of the graphic file replaces "filename." And you may offer an alternative "text" 
substitute for the graphic for users operating non-graphic browsers Oike Lynx). 

To get a little fancy, you can combine these two commands (putting <img align=x src=" filename" 
alt=**text"> between <a href="?"> and </a>, where the text would ordinarily go) to create graphics 
that operate as "buttons" that link your document to other resources on the Web. But gettting fancy is, 
by no means, required in your first venture into Web constmction. You can save that for your second 
or third venture, after you've done a little experimenting, tested the results, and visited the on-line Web 
tutorials you'll find listed in Appendix B of this paper. 

In the meantime, there is a good deal to be said for keeping things simple in this new interactive 
medium; and very little of that has been said, thus far. The best of what has been said so far, along 
these lines, I'd like to cite. I heard it at a conference this Spring in Columbia, Missouri. The subject' 
was Web aesthetics and the speaker was Scott Fritz, manager of User Services for the Missouri 
Research and Education Network. He suggested the folloiwng: 

Limit the wordiness of your documents. Several small documents arc probably better than one large 
one. 

Limit the size of graphics and offer alternative views for those without grahical interfaces. Thumbnail 
graphics [2,000 to 3,000 bytes] provide a small view so that people might explore graphics of interest 
and not enlarge those they do not wish to see. 

Too much written material or too much grahpical information can both be difficult to look at, and be 
difficult for those who print the material out. 

When linking to a purely grahical piece of information indicate the approximate size of the graphic. 
Always try to give the viewer an indication of where they arc. 

Always try to provide some simple navigtional buttoas (not all browsers incorporate the common ones, 
so you may want to have a "backnut" button, or a link to the central home page of your server). 

Try to make the text which indicates your links be informative of the links (do not use "click here" as 
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the link text). This could help [bibliographic] indexing processes. (Fritz) 

Appendices include sample text from a Web document of my own construction and some http and ftp 
sites of interest to Web builders. 



Appendix A: Sample Web Document 
<html> 

<title> Jumpin's Jive Pad <Aitle> 

<hl> Jumpin* Johnny's Jive Pad </hl><p> 

<img align=bottom src="jumpbutt.gif •>ThiS Jive Pad belongs to Jumpin' Johnny LaRoe, pictured here. 
"Ta da!"<p> 

<H4><i>It has <b> Whole New Worlds</b> to explore ... </i></H4> 

You could visit a <a href="http://www.atom.co.jp/GALLERY/index.html"><b> Virtual 
Gallery</b></a> of contemporary art in Japan, fr'instance, or travel to <a 
href="http://www.eunet.es/spain/images-dali/"xb>Spain</b></a> to view (or even download) a 
collection of works by Salvador Dali. And there's always <a 

href="http://sunsite.unc.eduAouvrer><b>Le Louvre</b></a>, of course - <i>dans le pays du 
Coneheads</i>.<p> 

You also may wish to explore the campus of <A HREF="du„moo_l.html"><b>Diversity University 
MOO</b></A>, where Jumpin and his friends do some of their best eduMOOcational work; or wander 
the streets of <a href="http://www.awa.com/"><b>Downtown Anywhere</b></a> or the outskirts of <a 
href="http://sensemedia.net/sprawl/"xb>The Sprawl</b></a> Jumpin's favorite page away from 
home. But please understand ...<p> 

<H4><I>you're also welcome to stick around.</I></H4></dl> 

There are things to see here, too, ... in Jumpin's <A HREF="gallery.himr'>personal aa collection</A> 
... and things to read, as well, in his <A HREF="library.html">private library</A>. 

</html> 



Appendix B: HTTP & FTP Sites 



A Beginners Guide to html (from ncsa) 
http://www.ncsa.uiuc.edu/dcmowcb^tm^primcr.html 
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Clarkson University's html Tutorial 
hup:// fire.clarkson.edu/htmIAitut.html 

Indiana University's Primer to Web Writing 
http://www«slis.lib.indiana.eduAmtemet/programmer-page.html 

ncsa Guide to Documents for Writing Good html 
http://union.ncsa.uiuc.edu:80/HyperNews/get/www/html.guides.html 

The Bad Style Page (examples of things worth avoiding) 
http://www.earth.com/bad-style 

A Good Collection of Web Materials (including html editors) 

ftp://flp.more.net/pub/nic/windows 
or 

ftp://flp.morc.net/pub/nic/mac 
or 

f tp://ftp .m 0 re . nct/pub/nic/uni x 
or 

ftp://flp.morc.net/pub/nic/os2 
or 

ftp://ftp.morc.net/pub/nic/lan 
or 

ftp://ftp.morc.net/pub/nic/dos 

Other Handy Web Stuff via MOREnet 

http://www.more.net/common/rcsourccs/web_resources/intcmct.htm 
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